import { useState, useEffect, useMemo } from 'react'
import EChart from '../components/EChart.tsx'
import * as echarts from 'echarts'
import './shouye.css'
import ThemeSwitchButton from '../components/ThemeSwitchButton'

function Shouye() {
  // Current time state
  const [currentTime, setCurrentTime] = useState<string>(
    new Date().toLocaleTimeString('zh-CN', { hour12: false })
  )
  const [timeRange, setTimeRange] = useState<'week' | 'month'>('week')

  // Update time every second
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(
        new Date().toLocaleTimeString('zh-CN', { hour12: false })
      )
    }, 1000)
    return () => clearInterval(timer)
  }, [])

  // Platform distribution donut chart
  const donutOption = useMemo(() => ({
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item' as const,
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical' as const,
      right: 20,
      top: 'center',
      textStyle: { color: '#d3e9ff', fontSize: 12 },
      itemGap: 12
    },
    series: [
      {
        type: 'pie' as const,
        radius: ['45%', '70%'],
        center: ['35%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 5,
          borderColor: '#1a1a2e',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}\n{c} ({d}%)',
          color: '#d3e9ff',
          fontSize: 11
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 13,
            fontWeight: 'bold' as const
          },
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        data: [
          { value: 1048, name: '抖音', itemStyle: { color: '#ff4757' }, emphasis: { scale: true, scaleSize: 10 } },
          { value: 720, name: '快手', itemStyle: { color: '#ffa502' } },
          { value: 580, name: '小红书', itemStyle: { color: '#ffd32a' } },
          { value: 420, name: '微博', itemStyle: { color: '#2ed573' } },
          { value: 320, name: '其他', itemStyle: { color: '#5da8ff' } }
        ]
      }
    ]
  }), [])

  // Data trends line chart
  const lineOption = useMemo(() => {
    const weekData = {
      categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      capture: [800, 950, 1100, 1200, 1150, 1300, 1450],
      publish: [120, 140, 130, 150, 145, 160, 180],
      interaction: [200, 220, 210, 230, 225, 240, 260]
    }
    const monthData = {
      categories: ['第1周', '第2周', '第3周', '第4周'],
      capture: [3200, 3800, 4200, 4500],
      publish: [480, 520, 560, 600],
      interaction: [800, 880, 920, 980]
    }
    const data = timeRange === 'week' ? weekData : monthData

    return {
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'axis' as const,
        axisPointer: { type: 'cross' as const }
      },
      legend: {
        data: ['抓取数据量', '发布数量', '互动量'],
        top: 10,
        textStyle: { color: '#d3e9ff', fontSize: 12 },
        itemGap: 20
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category' as const,
        boundaryGap: false,
        data: data.categories,
        axisLine: { lineStyle: { color: '#5a7a9a' } },
        axisLabel: { color: '#d3e9ff', fontSize: 11 }
      },
      yAxis: {
        type: 'value' as const,
        axisLine: { lineStyle: { color: '#5a7a9a' } },
        axisLabel: { color: '#d3e9ff', fontSize: 11 },
        splitLine: { lineStyle: { color: '#2a4a6a', type: 'dashed' as const } }
      },
      series: [
        {
          name: '抓取数据量',
          type: 'line' as const,
          smooth: true,
          data: data.capture,
          symbol: 'circle' as const,
          symbolSize: 6,
          lineStyle: { color: '#5da8ff', width: 2 },
          itemStyle: { color: '#5da8ff' },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(93, 168, 255, 0.3)' },
              { offset: 1, color: 'rgba(93, 168, 255, 0.05)' }
            ])
          }
        },
        {
          name: '发布数量',
          type: 'line' as const,
          smooth: true,
          data: data.publish,
          symbol: 'diamond' as const,
          symbolSize: 6,
          lineStyle: { color: '#2ed573', width: 2 },
          itemStyle: { color: '#2ed573' }
        },
        {
          name: '互动量',
          type: 'line' as const,
          smooth: true,
          data: data.interaction,
          symbol: 'circle' as const,
          symbolSize: 6,
          lineStyle: { color: '#ff4757', width: 2 },
          itemStyle: { color: '#ff4757' }
        }
      ]
    }
  }, [timeRange])

  return (
    <div className="dashboard-container">
      {/* Main Content */}
      <main className="main-content">
        {/* Header */}
        <header className="dashboard-header">
          <div className="header-left">
            <span className="header-icon">📈</span>
            <h1 className="header-title">数据洞察中心</h1>
            {/* 主题切换按钮移到这里 */}
            <ThemeSwitchButton />
          </div>
          <div className="header-right">
            <span className="header-time">{currentTime}</span>
            <button className="refresh-btn">
              <span>🔄</span>
              <span>刷新数据</span>
            </button>
          </div>
        </header>

        {/* Top Metrics */}
        <div className="metrics-row">
          <div className="metric-card">
            <div className="metric-icon green">✓</div>
            <div className="metric-content">
              <div className="metric-label">系统状态</div>
              <div className="metric-value">运行正常</div>
              <div className="metric-desc">最后检查:刚刚</div>
            </div>
          </div>
          <div className="metric-card">
            <div className="metric-icon green">📊</div>
            <div className="metric-content">
              <div className="metric-label">今日数据增长</div>
              <div className="metric-value positive">+12.5%</div>
              <div className="metric-desc">较昨日</div>
            </div>
          </div>
          <div className="metric-card">
            <div className="metric-icon green">✓</div>
            <div className="metric-content">
              <div className="metric-label">任务完成率</div>
              <div className="metric-value">92%</div>
              <div className="metric-desc">目标: 90%</div>
            </div>
          </div>
        </div>

        {/* Charts Grid */}
        <div className="charts-grid">
          {/* Platform Distribution */}
          <div className="chart-card">
            <div className="chart-header">
              <h3 className="chart-title">平台数据分布</h3>
              <select className="chart-filter">
                <option>评论数据</option>
                <option>点赞数据</option>
                <option>转发数据</option>
              </select>
            </div>
            <div className="chart-content">
              <EChart option={donutOption} height="100%" />
            </div>
          </div>

          {/* Data Trends */}
          <div className="chart-card">
            <div className="chart-header">
              <h3 className="chart-title">数据趋势</h3>
              <div className="chart-tabs">
                <button
                  className={`tab-btn ${timeRange === 'week' ? 'active' : ''}`}
                  onClick={() => setTimeRange('week')}
                >
                  周
                </button>
                <button
                  className={`tab-btn ${timeRange === 'month' ? 'active' : ''}`}
                  onClick={() => setTimeRange('month')}
                >
                  月
                </button>
              </div>
            </div>
            <div className="chart-content">
              <EChart option={lineOption} height="100%" />
            </div>
          </div>
        </div>

        {/* Bottom Placeholder Cards */}
        <div className="placeholder-row">
          <div className="placeholder-card">
            <div className="placeholder-number">01</div>
            <div className="placeholder-title">任务执行状态</div>
          </div>
          <div className="placeholder-card">
            <div className="placeholder-number">01</div>
            <div className="placeholder-title">热门内容分析</div>
          </div>
          <div className="placeholder-card">
            <div className="placeholder-number">01</div>
            <div className="placeholder-title">账号健康度</div>
          </div>
        </div>
      </main>
    </div>
  )
}

export default Shouye